<template>

    <UxDialog :visible="visible" @close="close()" :canClose="false" class="platen-dialog">

        <div class="platen-close" @click="close()"></div>

        <div class="platen-select" v-if="!code">

            <h3>Choose an embroidery frame</h3>

            <ul>
                <li v-for="platen in platenAbles" :key="platen.id">
                    <figure @click="code = platen.code" :code="platen.code">
                        <img src="@/assets/images/designer/designer-emb-platen1.png" v-if="platen.code == 1" />
                        <img src="@/assets/images/designer/designer-emb-platen2.png" v-if="platen.code == 2" />
                        <img src="@/assets/images/designer/designer-emb-platen3.png" v-if="platen.code == 3" />
                    </figure>
                    <div class="platen-text">
                        <span>Size:</span>
                        <DesignerEmbPlatenName :name="platen.name" />
                    </div>
                    <div class="platen-text"><span>Stitches:</span> <strong v-text="platen.base_stitches"></strong>
                    </div>
                    <div class="platen-text">
                        <span>Price:</span>
                        <CommonCurrencyRate :price="platen.base_price" type="unit|price" />
                    </div>

                </li>
            </ul>
        </div>

        <div class="platen-dst" v-else>


            <div class="platen-dst-back" @click="toBack()"></div>

            <div class="platen-dst-classify">

                <div class="platen-upload">
                    <figure><img src="@/assets/images/designer/designer-platen-dst.png" alt=""></figure>
                    <button @click="toDstSelect()">Add embroidery file</button>

                    <div class="platen-dst-recently" v-if="recentlyUpload.length > 0">
                        <h4>Recently used</h4>
                        <ul>
                            <li v-for="item in recentlyUpload.slice(0, 3)" :key="item.id"
                                :class="{ disabled: isDisabled(item.width, item.height) }">
                                <img crossOrigin="anonymous" v-lazy="$getImageUrl(item.img_url, 'medium')"
                                     :style="$fiexImage(item.width, item.height, 1)" />
                                <span @click="selectDst(item)"></span>

                                <!-- <EmbroideryPreview :stitches="getStitchesFormat(item.stitches)" :colors="getColorsFormat(item.line_color)" :style="$fiexImage(item.width, item.height, 1)" /> -->
                            </li>
                        </ul>
                    </div>
                </div>
                <div class="platen-text">
                    <figure><img src="@/assets/images/designer/designer-platen-txt.png" alt=""></figure>
                    <button @click="toText()">Add text</button>
                    <div class="platen-dst-recently" v-if="recentlyText.length > 0">
                        <h4>Recently used</h4>
                        <ul>
                            <li v-for="(item, index) in recentlyText.slice(0, 3)" :key="index"
                                :class="{ disabled: isDisabled(item.dst_width, item.dst_height) }">
                                <EmbroideryPreview :stitches="getStitchesFormat(item.stitches)"
                                                   :colors="getColorsFormat(item.line_color)" />
                                <span @click="selectTxt(item)"></span>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>

            <div class="platen-dst-template">

                <h4>Template</h4>
                <div class="platen-dst-template-scroller">
                    <ul>
                        <li v-for="(dst, index) in temps" :key="index"
                            :class="{ disabled: isDisabled(dst.width, dst.height) }">
                            <EmbroideryPreview :stitches="getStitchesFormat(dst.stitches)"
                                               :colors="getColorsFormat(dst.line_color)" />
                            <span @click="selectDst(dst)"></span>
                        </li>

                    </ul>
                </div>
            </div>
        </div>

        <UxLoading2 :loading="loading" />

    </UxDialog>

</template>

<script>
import { mapGetters } from "vuex";
import DesignUtils from "@/utils/DesignUtils.js";
import { getStitchesByBase64 } from "@/utils/EmbroideryDst.js";
import { colors } from "@/utils/EmbroideryPattern.js";
import { emb_temp } from "@/utils/emb-temp.js";


export default {
    props: {
        recentlyUpload: { type: Array, default: () => [] },
        recentlyText: { type: Array, default: () => [] },
    },
    data () {
        return {
            type: 'platen',
            visible: false,
            code: '',
            loading: false,
            top: 0,
            currentLayer: null,
            temps: emb_temp,
        };
    },

    computed: {
        ...mapGetters({
            isLogin: "getIsLogin",
        }),
        ...mapGetters("user", {
            userInfo: "getUserInfo",

        }),
        ...mapGetters("designer", {
            platens: "getPlatens",
            pieces: "getPieces",
            activePiece: "getActivePiece",
            activeLayer: "getActiveLayer",
        }),

        platenAbles () {
            const optional = (this.activePiece || {}).optional_platens || []
            const codes = optional.map(i => i.code);
            const list = this.platens.filter(i => codes.indexOf(i.code) >= 0)
            return list
        },
        platenActive () {
            return this.platens.find(i => i.code == this.code)
        }
    },
    methods: {

        // 添加到最近使用
        async addRecently (dst) {

            if (!this.isLogin) {
                // 未登录
            } else if (dst.type == 'upload') {
                // 版带最近使用
                if (dst.dst_id > 0) {
                    await this.$http("Material.addEmbUploadUsed/" + dst.dst_id, {})
                    this.$emit('global:DESIGN_LOAD_RECENTLY_EMB')
                }
            } else if (dst.type == 'text') {
                // 文字最近使用
                const option = {
                    line_color: dst.line_color,
                    stitches: dst.stitches,
                    stitches_count: dst.stitches_count,
                    dst_width: dst.dst_width, // 单位是0.1mm
                    dst_height: dst.dst_height, // 单位是0.1mm
                    font_text: dst.font_text || '', // 文字内容
                    font_envelop: dst.font_envelop || '', // 文字变形
                    font_arc: dst.font_arc || 0, // 文字弧度
                    font_size: dst.font_size || 0, // 文字大小
                    font_family: dst.font_family || '', // 字体
                }

                await this.$http("Material.addEmbTextUsed", option)
                this.$emit('global:DESIGN_LOAD_RECENTLY_TXT')

            }
        },

        // 添加版带
        addDst (piece, option) {

            const platen = this.platenActive
            const emb_zoom = piece.emb_zoom || 1
            const scale = piece.canvas_zoom / emb_zoom;
            const rotate = option.dst_width > platen.width * 254 / 300 ? 90 : 0;
            const dst = {
                id: DesignUtils.getUsableId({ layers: [] }),
                type: option.type || "upload", // 类型[image|text|emb]
                dst_id: option.dst_id,
                dst_name: option.dst_name || '',
                dst_width: option.dst_width, // 单位是0.1mm
                dst_height: option.dst_height, // 单位是0.1mm
                font_text: option.font_text || '', // 文字内容
                font_envelop: option.font_envelop || '', // 文字变形
                font_arc: option.font_arc || 0, // 文字弧度
                font_size: option.font_size || 0, // 文字大小
                font_family: option.font_family || '', // 字体
                line_color: option.line_color,
                stitches: option.stitches,
                stitches_count: option.stitches_count,
                x: 0, // 图片最终显示x轴坐标
                y: 0, // 图片最终显示Y轴坐标
                w: scale * 300 * option.dst_width / 254, // 图片最终显示宽度, mm转英寸转300dpi之后缩放
                h: scale * 300 * option.dst_height / 254, // 图片最终显示调试, mm转英寸转300dpi之后缩放
                rotate: rotate, // 旋转角度
            };

            if (this.type == 'platen' && platen) {
                // 添加新框
                const layer = {
                    type: 'emb',
                    platens_id: platen.code || '',
                    name: platen.name,
                    w: platen.width * scale,
                    h: platen.height * scale,
                    x: 0.5 * (piece.canvas_width - platen.width * scale),
                    y: 0.5 * (piece.canvas_height - platen.height * scale),
                    rotate: 0,
                    product_dist: '',
                    product_preview: '',
                    product_colors: dst.line_color,
                    stitches_count: dst.stitches_count,
                    price: 0,
                    scale: piece.emb_zoom || 1,
                    dists: [dst]
                }

                dst.x = (platen.width * scale - dst.w) / 2
                dst.y = (platen.height * scale - dst.h) / 2;

                this.addRecently(dst);
                this.$store.commit("designer/ADD_LAYER", layer);
                this.$store.commit("designer/SET_ACTIVE_LAYER", piece.layers.slice(-1)[0]);
                this.$store.commit("designer/SET_ACTIVE_LAYER_PRICE", layer);
                this.$store.commit("designer/SET_ACTIVE_DST_INDEX", layer.dists.indexOf(dst));
                this.visible = false;
                this.$emit('global:DESIGN_NOTIFY_CHECK')
                this.$emit('global:DESIGN_NOTIFY_LIMIT')

            } else if (this.activeLayer || this.currentLayer) {
                const layer = this.activeLayer || this.currentLayer;
                dst.id = DesignUtils.getUsableId({ layers: layer.dists || [] })
                dst.x = (layer.w - dst.w) / 2
                dst.y = (layer.h - dst.h) / 2;


                // 已经有绣框
                this.addRecently(dst);
                layer.dists.push(dst);
                this.$store.commit("designer/SET_ACTIVE_DST_INDEX", layer.dists.indexOf(dst));
                this.$store.commit("designer/SET_ACTIVE_LAYER_PRICE", layer);
                this.visible = false;
                this.$emit('global:DESIGN_NOTIFY_CHECK')
                this.$emit('global:DESIGN_NOTIFY_LIMIT')
            }
        },

        // 选中文件
        selectDst (item) {

            const piece = this.activePiece
            const dst = {
                type: 'upload',
                dst_id: item.id || 0,
                dst_name: item.file_name || '',
                dst_width: item.width, // 单位是0.1mm
                dst_height: item.height, // 单位是0.1mm
                font_text: '', // 文字内容
                font_envelop: '', // 文字变形
                font_arc: 0, // 文字弧度
                font_size: 0, // 文字大小
                font_family: '', // 字体
                line_color: item.line_color,
                stitches: item.stitches,
                stitches_count: item.stitches_count,
            }

            this.addDst(piece, dst)

            if (item.id > 0) {
                // 添加到最近使用
            }
        },

        // 选中文件
        selectTxt (item) {

            const piece = this.activePiece

            const dst = {
                type: 'text',
                dst_id: '',
                dst_name: '',
                dst_width: item.dst_width, // 单位是0.1mm
                dst_height: item.dst_height, // 单位是0.1mm
                font_text: item.font_text,
                font_envelop: item.font_envelop,
                font_arc: item.font_arc,
                font_size: item.font_size,
                font_family: item.font_family,
                line_color: item.line_color,
                stitches: item.stitches,
                stitches_count: item.stitches_count,
            }

            this.addDst(piece, dst)
        },

        // 添加文字
        toDstSelect () {
            this.$emit("global:DESIGN_OPEN_EMB_TXT_SELECT_DIALOG", {
                platen: this.platenActive,
                callback: (res) => this.selectDst(res)
            });
        },


        // 添加文字
        toText () {
            const option = {
                stitches: "",
                stitches_count: 0,
                line_color: '1001',
                dst_name: '',
                dst_width: 0,
                dst_height: 0,
                font_text: '', // 文字内容
                font_envelop: '', // 文字变形
                font_arc: 0, // 文字弧度
                font_size: 127, // 文字大小
                font_family: 'Blackboard', // 字体
                platen: this.platenActive,
                callback: (res) => this.selectTxt(res)
            }

            this.$emit("global:DESIGN_OPEN_EMB_TXT_EDIT_DIALOG", option);
        },

        toBack () {
            this.code = ''
        },

        getStitchesFormat (stitches) {
            return stitches ? getStitchesByBase64(stitches) : []
        },

        getColorsFormat (line_color) {
            const codes = line_color.split(',').filter(i => i)
            return codes.map(i => colors.find(c => c.code == i)).filter(i => i)
        },

        // 是否不能选中
        isDisabled (width, height) {
            if (!this.platenActive) {
                return true;
            } else {
                // 比较最长边
                const size = {
                    width: this.platenActive.width * 254 / 300,
                    height: this.platenActive.height * 254 / 300,
                }
                const max = Math.max(size.width, size.height) > Math.max(width, height)
                const min = Math.min(size.width, size.height) > Math.min(width, height)
                return !(max && min)
            }
        },

        // 打开窗口
        openLabel () {
            this.type = 'platen'
            this.code = '';
            this.visible = true;
            this.loading = false;
        },

        // 选择添加的版带类型
        openDst (layer) {
            this.currentLayer = layer;

            const code = (layer || {}).platens_id || '';
            this.type = code ? 'dst' : 'platen';
            this.code = code;
            this.visible = true;
            this.loading = false;
        },
        // 关闭弹窗
        close () {
            this.visible = false;
        },
    },

    created () {
        this.$on("global:DESIGN_OPEN_EMB_LABEL", () => this.openLabel());
        this.$on("global:DESIGN_OPEN_EMB_DST", (layer) => this.openDst(layer));
    },
};
</script>

<style lang="scss" scoped>
.platen-select {
    height: 352px;
    min-width: 588px;
    box-sizing: border-box;
    padding: 48px;

    &>h3 {
        font-family: Roboto-Medium, Roboto;
        font-weight: 500;
        font-size: 14px;
        color: #292929;
        line-height: 16px;
        text-align: center;
    }

    ul {
        display: flex;
        justify-content: center;
        margin: 0 -22px;

        li {
            margin: 20px 22px;
        }

        figure {
            position: relative;
            border-radius: 6px;
            border: 1px solid #e6e6e6;
            cursor: pointer;
            width: 140px;
            height: 140px;
            box-sizing: border-box;
            margin-bottom: 12px;

            &::before {
                content: '';
                display: block;
                padding-bottom: 100%;
            }

            &>img {
                position: absolute;
                left: 50%;
                top: 50%;
                transform: translate(-50%, -50%);
            }

            &[code='1'] img {
                width: 26px;
                height: 30px;
            }

            &[code='2'] img {
                width: 26px;
                height: 66px;
            }

            &[code='3'] img {
                width: 66px;
                height: 66px;
            }

            &:hover {
                box-shadow: 0px 2px 8px 0px rgba(0, 0, 0, 0.1);
            }
        }

        .platen-text {
            display: flex;
            align-items: center;

            &>span:first-child {
                width: 56px;
                font-family: Roboto, Roboto;
                font-weight: 400;
                font-size: 14px;
                color: #555555;
                line-height: 22px;
                text-align: right;
                margin-right: 8px;
            }

            .currency-rate,
            .emb-platen-name,
            strong {
                font-family: Roboto, Roboto;
                font-weight: 400;
                font-size: 14px;
                color: #292929;
                line-height: 22px;
                text-align: center;
                display: flex;
                align-items: center;
                justify-content: center;
            }
        }
    }
}

.platen-close {
    position: absolute;
    width: 26px;
    height: 26px;
    top: 12px;
    right: 12px;
    border-radius: 6px;
    background-size: 26px 26px;
    background-image: url(@/assets/images/designer/dialog-close.png);
    background-position: center center;
    background-repeat: no-repeat;
    cursor: pointer;

    &:hover {
        background-color: rgba($color: #ff0000, $alpha: 0.2);
    }
}

.platen-dst {
    width: 580px;
    padding: 60px;
    box-sizing: border-box;

    .platen-dst-back {
        position: absolute;
        width: 26px;
        height: 26px;
        top: 12px;
        left: 12px;
        border-radius: 6px;
        background-size: 26px 26px;
        background-image: url(@/assets/images/designer/dialog-back.png);
        background-position: center center;
        background-repeat: no-repeat;
        cursor: pointer;

        &:hover {
            background-color: #ebebeb;
        }
    }


    .platen-dst-classify {
        display: flex;

        .platen-upload,
        .platen-text {
            flex: 1;
            display: flex;
            flex-direction: column;

            figure {
                position: relative;
                width: 92px;
                height: 92px;
                display: block;
                margin: 0 auto;

                &::before {
                    content: '';
                    display: block;
                    padding-bottom: 100%;
                }

                &>img {
                    position: absolute;
                    left: 0;
                    top: 0;
                    width: 100%;
                    height: 100%;
                }
            }

            &>button {
                margin: 28px auto 60px;
                width: 168px;
                height: 36px;
                border-color: #707070;
            }
        }

        .platen-text {
            margin-left: 60px;
        }
    }

    .platen-dst-recently {
        width: 100%;
        margin-bottom: 11px;

        &>h4 {
            font-family: Roboto, Roboto;
            font-weight: 400;
            font-size: 14px;
            color: #555555;
            line-height: 16px;
        }

        ul {
            display: flex;
            margin: 7px -5px 0;

            li {
                width: 60px;
                box-sizing: border-box;
                margin: 5px;
                border-radius: 4px;
                border: 1px solid #e6e6e6;
                box-sizing: border-box;
                position: relative;
                cursor: pointer;

                &::before {
                    content: '';
                    display: block;
                    padding-bottom: 100%;
                }

                &>span {
                    position: absolute;
                    left: 0;
                    top: 0;
                    right: 0;
                    bottom: 0;
                }

                &.disabled::after {
                    content: 'Too Large';
                    position: absolute;
                    left: 0;
                    top: 0;
                    right: 0;
                    bottom: 0;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    background: rgba(78, 76, 76, 0.8);
                    border-radius: 4px;
                    font-family: Roboto, Roboto;
                    font-weight: 500;
                    font-size: 12px;
                    color: #ffffff;
                }

                .embroidery-preview,
                img {
                    position: absolute;
                    left: 0;
                    top: 0;
                    width: 100%;
                    height: 100%;
                }

                &:hover {
                    box-shadow: 0px 2px 8px 0px rgba(0, 0, 0, 0.1);
                }
            }
        }
    }

    .platen-dst-template {
        &>h4 {
            font-family: Roboto, Roboto;
            font-weight: 400;
            font-size: 14px;
            color: #555555;
            line-height: 16px;
        }

        .platen-dst-template-scroller {
            height: 70px;
            overflow-y: auto;
            overflow-x: hidden;
            margin: 12px 0 0;

            &::-webkit-scrollbar {
                width: 6px;
            }

            &::-webkit-scrollbar-thumb {
                width: 6px;
                height: 30px;
                background: #D7D7D7;
                border-radius: 3px;
            }
        }

        ul {
            display: flex;
            flex-wrap: wrap;
            margin: -5px;

            li {
                width: 60px;
                height: 60px;
                background: #ffffff;
                border-radius: 4px;
                border: 1px solid #e6e6e6;
                margin: 5px;
                position: relative;
                cursor: pointer;

                .embroidery-preview {
                    position: absolute;
                    left: 0;
                    top: 0;
                    width: 100%;
                    height: 100%;
                }

                &>span {
                    position: absolute;
                    left: 0;
                    top: 0;
                    width: 100%;
                    height: 100%;
                }

                &.disabled::after {
                    content: 'Too Large';
                    position: absolute;
                    left: 0;
                    top: 0;
                    right: 0;
                    bottom: 0;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    background: rgba(78, 76, 76, 0.8);
                    border-radius: 4px;
                    font-family: Roboto, Roboto;
                    font-weight: 500;
                    font-size: 12px;
                    color: #ffffff;
                }


                &:hover {
                    box-shadow: 0px 2px 8px 0px rgba(0, 0, 0, 0.1);
                }
            }
        }
    }
}


.platen-dialog {

    &::v-deep .dialog-close {
        width: 26px;
        height: 26px;
        right: 12px;
        top: 12px;



        svg {
            // display: none;
        }

        &:hover {
            background-color: rgba($color: #ff0000, $alpha: 0.2);

            svg {
                color: #990306;
            }
        }
    }
}
</style>
